<!-- 中间拖拽表单组件渲染 -->
<template>
  <div class="form-render" :class="renderConfig.model=='preview'&&'preview-form'">
    <a-form v-bind="formConfig" style="width: 100%;height: 100%;" ref="formRef">
      <vue-draggable :disabled="renderConfig.model!='edit'" style="width: 100%;;height: 100%"  :animation="150" group="form-design" ghostClass='ghost' v-model="draggableFormEntitys">
          <formItemRender @select="handleClick" v-for="(entity,index) in draggableFormEntitys" :draggableFormEntity="entity"></formItemRender>
      </vue-draggable>
    </a-form>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, computed, type Ref, type PropType } from 'vue'
import formItemRender from './form-item/form-item-render';
import { VueDraggable } from 'vue-draggable-plus'
import BaseEntity from './form-item/components/BaseEntity'
import type { configType, slotFormConfigType } from './form-item/components/BaseEntity'
import useForm from '../hooks/useForm';

let props=defineProps({
  FormEntitys:{
    type:Array as PropType<Array<BaseEntity>>,
    default:()=>[]
  }
})
let formRef=ref()
let {selectFormComponent,FormEntitys,FormConfig,renderConfig}=useForm()
FormEntitys.value=props.FormEntitys||[] //初始化表单实体数组
let draggableFormEntitys: Ref<Array<BaseEntity>> =FormEntitys

let formConfig = computed(() => {
  return {
    ...FormConfig.value,
    model: draggableFormEntitys.value
      .map(entity => {
        return [
          entity.config.field,
          entity.slotFormConfig.modelValue
        ]
      })
      .reduce((acc: any, [key, value]) => {
        acc[key] = value
        return acc
      }, {}),
  }
})

function handleClick(entity: BaseEntity) {
  console.log(entity)

  selectFormComponent(entity)
}

defineExpose({
  formRef
})
</script>
<style scoped lang="less">
@import "../styles/index.less";

.form-render {
width: 100%;
 height: 100%;

}

.preview-form /deep/ .form-container .selected{
  border:none ;
}
.preview-form /deep/ .SpaceLayout{
  background-color: white;
}
.preview-form /deep/ .col-container{
  background-color: white;
}
</style>